.ww-aside-navbar {position:relative;}
#flycontainer {width: 98%;height: 566px;top: 0px;position: absolute;z-index: 10;
	perspective: 600px;
	perspective-origin: -20% 20%;
}
#butterfly{left: 0px;top: 0px;width: 400px;height: 238px;
	transform: rotateZ(-30deg) rotate3d(0, 1, 0, 0deg) scale3d(0.5, 0.5, 0.5);
	transform-origin: 65% 50%;
	transform-style: preserve-3d;
	animation-name: butterflyani;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: linear; 
}
.wing{position: absolute;left: 200px;top: 0px;width: 116px;height: 238px;background: url(../img/butterfly.png) no-repeat;
	transform: rotateX(30deg) translate3d(-200px, 0px, 0px) rotate3d(0, 1, 0, 160deg);
	transform-origin: top right;
	animation-name: rightwingani;
    animation-duration: 0.6s; 
    animation-iteration-count: infinite;
    animation-timing-function: ease-out; 
}
#butterfly .left{left: 0px;top: 0px;
	transform: rotateX(30deg) rotate3d(0, 1, 0, 0deg);
	animation-name: leftwingani;
}
@keyframes rightwingani {
	from {
		transform:rotateX(30deg) translate3d(-200px, 0px, 0px) rotate3d(0, 1, 0, 160deg);
	}
	50% {
		transform:rotateX(30deg) translate3d(-200px, 0px, 0px) rotate3d(0, 1, 0, 100deg);
	}
	to{
		transform:rotateX(30deg) translate3d(-200px, 0px, 0px) rotate3d(0, 1, 0, 160deg);
	}
}

@keyframes leftwingani {
	from {
		transform:rotateX(30deg) rotate3d(0, 1, 0, 0deg);
	}
	50% {
		transform:rotateX(30deg) rotate3d(0, 1, 0, 80deg);
	}
	to{
		transform:rotateX(30deg) rotate3d(0, 1, 0, 00deg);
	}
}

@keyframes butterflyani {
  from {
    transform: rotate3d(0, 1, 0, 0deg) scale3d(0.5, 0.5, 0.5) translate3d(-300px, 350px, 0px);
  }
  25% {
    transform: rotate3d(0, 4, 0, -90deg) scale3d(0.5, 0.5, 0.5) translate3d(-300px, 350px, 0px);
  }
  50% {
    transform: rotate3d(0, 7, 0, -180deg) scale3d(0.5, 0.5, 0.5) translate3d(-300px, 350px, 0px);
  }
  75% {
    transform: rotate3d(0, 4, 0, -270deg) scale3d(0.5, 0.5, 0.5) translate3d(-300px, 350px, 0px);
  }
  to{
    transform: rotate3d(0, 1, 0, -360deg) scale3d(0.5, 0.5, 0.5) translate3d(-300px, 350px, 0px);
  }
}
/*Slicebox Style*/
.sb-slider{margin: 10px auto 30px auto;position: relative;overflow: hidden;width: 100%;list-style-type: none;padding: 0;}
.sb-slider li{margin: 0;padding: 0;display: none;}
.sb-slider li > a{outline: none;}
.sb-slider li > a img{border: none;}
.sb-slider img{width: 100%;display: block;}
.sb-description{padding: 20px;bottom: 10px;left: 10px;right: 10px;z-index: 1000;position: absolute;background: #CBBFAE;background: rgba(190,176,155, 0.4);border-left: 4px solid rgba(255,255,255,0.7);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter: alpha(opacity=0);opacity: 0;color: #fff;-webkit-transition: all 200ms;-moz-transition: all 200ms;-o-transition: all 200ms;-ms-transition: all 200ms;transition: all 200ms;}
.sb-slider li.sb-current .sb-description{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";filter: alpha(opacity=80);opacity: 1;}
.sb-slider li.sb-current .sb-description:hover{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=99)";filter: alpha(opacity=99);background: rgba(190,176,155, 0.7);}
.sb-perspective{position: relative;}
.sb-perspective > div{position: absolute;-webkit-transform-style: preserve-3d;-moz-transform-style: preserve-3d;-o-transform-style: preserve-3d;-ms-transform-style: preserve-3d;transform-style: preserve-3d;-webkit-backface-visibility : hidden;-moz-backface-visibility : hidden;-o-backface-visibility : hidden;-ms-backface-visibility : hidden;backface-visibility : hidden;}
.sb-side{margin: 0;display: block;position: absolute;-moz-backface-visibility : hidden;-webkit-transform-style: preserve-3d;-moz-transform-style: preserve-3d;-o-transform-style: preserve-3d;-ms-transform-style: preserve-3d;transform-style: preserve-3d;}

/*自定义sliderBox样式*/
.sliceBox {position: relative;}
.sb-description h3{font-size: 20px;text-shadow: 1px 1px 1px rgba(0,0,0,0.3);}
.sb-description h3 a{color: #4a3c27;text-shadow: 0 1px 1px rgba(255,255,255,0.5);}
.nav-arrows a{width: 42px;height: 42px;background: #cbbfae url(../img/nav.png) no-repeat top left;position: absolute;top: 50%;left: 2px;text-indent: -9000px;cursor: pointer;margin-top: -21px;opacity: 0.9;border-radius: 50%;box-shadow: 0 1px 1px rgba(255,255,255,0.8);}
.nav-arrows a:first-child{left: auto;right: 2px;background-position: top right;}
.nav-arrows a:hover{opacity: 1;}
.nav-dots{text-align: center;position: absolute;bottom: -40px;height: 30px;width: 100%;left: 0;z-index:999;}
.nav-dots span{display: inline-block;width: 16px;height: 16px;border-radius: 50%;margin: 3px;background: #cbbfae;cursor: pointer;box-shadow:0 1px 1px rgba(255,255,255,0.6),inset 0 1px 1px rgba(0,0,0,0.1);}
.nav-dots span.nav-dot-current{box-shadow:0 1px 1px rgba(255,255,255,0.6),inset 0 1px 1px rgba(0,0,0,0.1),inset 0 0 0 3px #cbbfae,inset 0 0 0 8px #16c34b;}
